<template>
  <div class="daily">
    <ul class="small_menu">
      <!-- <router-link to="/home/daily" class="link"> -->
      <li @click="draw" type="primary">
        <img src="../../assets/images/组 38.png" alt="" />
        <div class="small_menu_title" @click="addTab(editableTabsValue)">
          日常业务
        </div>
      </li>
      <!-- </router-link> -->
      <!-- <router-link to="/home/alarm" class="link"> -->
      <li @click="addTab(editableTabsValue)">
        <img src="../../assets/images/路径 2.png" alt="" />
        <div class="small_menu_title">报警信息</div>
      </li>
      <!-- </router-link> -->
    </ul>
    <el-drawer
      :visible.sync="drawer"
      :modal="false"
      :wrapperClosable="false"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="daily_contain">
        <div class="left_list">
          <div class="list_title">预警监控信息</div>
          <div class="list_menu">
            <Tab />
          </div>
        </div>
      </div>
    </el-drawer>
    <div class="other">
      <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
          :closable="item.closable"
        >
          <tab-component :is="item.content"></tab-component>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <div class="daily_container"> -->
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
import Tab from "../../components/Tab.vue";
import Map from "../../components/Map.vue";
export default {
  data() {
    return {
      drawer: false,
      direction: "ltr",
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "地图",
          name: "1",
          content: "Map",
          closable: false,
        },
      ],
      tabIndex: 2,
    };
  },
  components: {
    Tab,
    Map,
  },
  methods: {
    handleClose(done) {
      done();
      let s = document.querySelector(".other");
      s.style.width = "100%";
    },
    draw() {
      this.drawer = true;
      let s = document.querySelector(".other");
      s.style.width = "calc(100% - 400px)";
    },
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "日常业务",
        name: newTabName,
        // content: "日常业务",
        closable: true,
      });
      this.editableTabsValue = newTabName;
      console.log(this.editableTabsValue);
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>
<style scoped lang="less">
@import url("../../css/main.css");
/deep/.el-tabs__content {
  width: 100%;
  height: 100%;
}
</style>
